<template>
    <div>
        <div>
            <Input v-model="text" placeholder="请输入你的答案"></Input>
        </div>
        <br>
        <Button long type="primary" @click="submit">提交答案</Button>
        <br>
        <br>
        <Alert v-if="result===1" type="success" show-icon>
            答案正确
            <span
                slot="desc"
            >问题解析:null</span>
        </Alert>
        <Alert v-else-if="result===0" type="error" show-icon>
            答案错误
            <span
                slot="desc"
            >问题解析:null</span>
        </Alert>
    </div>
</template>

<script>
import { Post, Get } from "@/api";
export default {
  name: "GapPart",
  data() {
    return {
      text:"",
      result:null
    };
  },
  props: {
    isNormal: {
      type: Boolean,
      default: true
    },
    problemId: {
      type: Number
    },
    contestId: {
      type: Number,
      default: 0
    },
    num: {
      type: Number,
      default: 0
    }
  },
  methods: {
    async submit() {
      const submitData = {
        problem_id: this.problemId,
        type: "problem_gap",
        ip: "null",
        contest_id: this.contestId,
        num: this.num,
        text: this.text
      };

      if (submitData.text === "") {
        this.$Message.warning("请输入");
        return;
      }
      const res = await Post.submitOther(submitData);
      if (res.statusCode === 0) {
        this.$Message.warning(res.message);
        return;
      }
      this.result = res.data.result;
    }
  },
  async created() {
    let res = await Get.getProblemStatus({
      acrive: this.contestId !== 0 ? "contest":"problem",
      problem_id: this.problemId,
      contest_id: this.contestId,
      num: this.num
    });

    if (res.statusCode == 0) {
      this.$Message.warning(res.message);
      return;
    }

    if (res.data.length && res.data[0].status != 2) {
      this.result = res.data[0].status;
      this.text = res.data[0].text;
      return;
    }
  }
};
</script>

<style lang="less" scoped>
.select {
  margin-bottom: 5px;
  padding: 5px 10px;
  transition: 0.36s all;
  width: 100%;
  white-space: nowrap;
  > * {
    width: 100%;
  }
  &:hover {
    background: #eee;
    border-radius: 3px;
  }
}

.success {
  background: rgb(199, 253, 192);
  &:hover {
    background: rgb(144, 255, 129);
  }
}

.error {
  background: rgb(253, 192, 192);
  &:hover {
    background: rgb(255, 129, 129);
  }
}
</style>